<template>
  <div class="download-manage-content">
    <div class="content">
      <div class="content-paragraph">
        <svg-icon
          icon-class="download-finish"
          :size="26"
          style="color: #1E8CFF;"
        />
        <span>当前下载用户过多，普通下载线路拥挤。</span>
      </div>
      <div class="content-paragraph">
        <span>推荐您切换至</span>
        <span class="vip-text">VIP专属高速通道，下载速度飙升，畅享极速下载体验！</span>
      </div>
    </div>
    <div class="dialog-footer">
      <el-button
        type="default"
        class="button"
        @click="continueDownload"
      >
        <span>继续下载</span>
      </el-button>
      <el-button
        type="primary"
        class="button"
        @click="gotoMember"
      >
        立即提速
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import { invokeAsyncAPi } from '@/utils/xz-fn'
import { useDownloadManageWindow } from '@/stores/download-manage-window'
import { storeToRefs } from 'pinia'

const downloadManageWindowStore = useDownloadManageWindow()
const { masterWindowId } = storeToRefs(downloadManageWindowStore)

const props = defineProps({
  id: {
    type: String,
    default:''
  }
})


const continueDownload = async () => {
  invokeAsyncAPi('fq_ShowUserCenter')
  invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'continue-user-overload-dialog', props.id);
  invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'close-fake-download-dialog');
  await invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'close-user-overload-window')
  invokeAsyncAPi('jsMsg_SetWndStatus', 0)
}

const gotoMember = async () => {
  invokeAsyncAPi('fq_ShowUserCenter')
  invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'close-fake-download-dialog');
  await invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'close-user-overload-window')
  invokeAsyncAPi('jsMsg_SetWndStatus', 0)
}

</script>

<style scoped lang="scss">
.download-manage-content{
  position: absolute;
  left:20px;
  right:20px;
  top:50px;
  bottom: 30px;
  font-size:14px;
  .vip-text{
    color:#C3962A;
  }
  .content{
    line-height: 20px;
    font-size: 12px;
    .content-paragraph + .content-paragraph{
      margin-bottom: 10px;
    }
  }
  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin:10px 0;
    gap:20px;
    button{
      width:100px;
      height:30px;
      border-radius: 20px;
      font-size:12px;
    }
  }
}
</style>